<script>
/**
 * @desc 主页面的'图表'
 */

import { mapState } from 'vuex'
import { toDailyList, numberFixed } from '@/utils'
import LoadingComp from '@/components/loading'
import TheBottomTabs from '@/components/the-bottom-tabs'
import ChartLine from './chart-line'
import ChartPie from './chart-pie'
import DetailList from './detail-list'
import TypePercent from './type-percent'
import TimeSelectBar from './time-select-bar'
import TimeSelectCover from './time-select-cover'
import chartLineIco from '@/assets/icons/chart-line.png'
import chartPieIco from '@/assets/icons/chart-pie.png'

export default {
  name: 'chart-page',

  components: {
    LoadingComp,
    TheBottomTabs,
    ChartLine,
    ChartPie,
    DetailList,
    TypePercent,
    TimeSelectBar,
    TimeSelectCover
  },

  data: () => ({
    showLoading: true,
    showContent: false,
    typeTabs: ['收入', '支出'],
    typeIndex: 0,
    chartType: 0, // 0:折线图 1:饼图
    timeLevel: 1, // 0:年 1:月
    year: new Date().getFullYear(),
    month: new Date().getMonth(),
    showTimeSelect: false,
    chartLineIco,
    chartPieIco
  }),

  computed: {
    ...mapState(['systemInfo']),
    ...mapState('TheBook', ['table']),

    currList() {
      const list = this.table.filter(v => {
        const itemDate = new Date(v.date)
        const itemYear = itemDate.getFullYear()
        const itemMonth = itemDate.getMonth()
        return this.timeLevel
          ? itemYear === this.year && itemMonth === this.month
          : itemYear === this.year
      })
      return list
    },

    dailyList() {
      return toDailyList(this.currList).reverse()
    },

    total() {
      const all = this.currList.reduce((pre, curr) => {
        return pre + (this.typeIndex === curr.type ? curr.money : 0)
      }, 0)
      return numberFixed(all)
    },

    average() {
      return this.currList.length
        ? numberFixed(this.total / this.currList.length)
        : 0
    }
  },

  methods: {
    handleTypeTab(index) {
      this.typeIndex = index
    },

    handleChartType() {
      this.chartType = (this.chartType + 1) % 2
    },

    handleShowTimeSelect(bool) {
      this.showTimeSelect = bool
    },

    handleTimeLevel(level) {
      this.timeLevel = level
    },

    handleYear(year) {
      this.year = year
    },

    handleMonth(month) {
      this.month = month
    }
  },

  mounted() {
    const contentTimer = setTimeout(() => {
      this.showContent = true
      clearTimeout(contentTimer)
    }, 1000)
    const loadingTimer = setTimeout(() => {
      this.showLoading = false
      clearTimeout(loadingTimer)
    }, 2000)
  }
}
</script>

<template>
  <div name="main-container">
    <div
      :class="$sty.container"
      v-show="showContent"
    >
      <div
        :class="$sty.topBar"
        :style="{paddingTop:systemInfo.statusBarHeight+'px', height:'44px'}"
      >
        <div :class="$sty.typeTabs">
          <span
            :class="i===typeIndex ? $sty.tabActive : $sty.tabNormal"
            :key="i"
            @click="()=>handleTypeTab(i)"
            v-for="(v,i) in typeTabs"
          >{{v}}</span>
        </div>

        <div
          :class="$sty.chartType"
          @click="handleChartType"
        >
          <img
            :class="chartType===0 ? $sty.chartIcoActive : $sty.chartIcoNormal"
            :src="chartLineIco"
            alt
          >
          <img
            :class="chartType===1 ? $sty.chartIcoActive : $sty.chartIcoNormal"
            :src="chartPieIco"
            alt
          >
        </div>
      </div>

      <scroll-view
        :class="$sty.scroll"
        :scroll-y="!showTimeSelect"
      >
        <div :class="$sty.layerWrapper">
          <div :class="$sty.layer">
            <time-select-bar
              :handleSelect="handleShowTimeSelect"
              :handleTimeLevel="handleTimeLevel"
              :level="timeLevel"
              :month="month"
              :year="year"
            />

            <chart-line
              :timeLevel="timeLevel"
              :typeIndex="typeIndex"
              v-if="chartType===0"
            />
            <chart-pie
              :data="currList"
              :typeIndex="typeIndex"
              v-else
            />

            <div :class="$sty.statistics">
              <div :class="$sty.statisticsItem">
                <span :class="$sty.statisticsTitle">总{{typeTabs[typeIndex]}}</span>
                <span :class="[$sty.statisticsNum, typeIndex ? $sty.red : $sty.green]">￥ {{total}}</span>
              </div>
              <div :class="$sty.statisticsItem">
                <span :class="$sty.statisticsTitle">平均{{typeTabs[typeIndex]}}</span>
                <span :class="[$sty.statisticsNum, typeIndex ? $sty.red : $sty.green]">￥ {{average}}</span>
              </div>
            </div>
          </div>
        </div>

        <type-percent
          :data="currList"
          :typeIndex="typeIndex"
          v-if="chartType===0"
        />
        <detail-list
          :list="dailyList"
          :typeIndex="typeIndex"
          v-else
        />
      </scroll-view>

      <the-bottom-tabs/>

      <!-- 选择时间段的遮罩层 -->
      <time-select-cover
        :handleMonth="handleMonth"
        :handleShow="handleShowTimeSelect"
        :handleYear="handleYear"
        :month="month"
        :show="showTimeSelect"
        :timeLevel="timeLevel"
        :year="year"
      />
    </div>

    <loading-comp :show="showLoading"/>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>